import { defineStore } from 'pinia'
import { store } from '@/store'
import { RouteLocationNormalizedLoaded } from 'vue-router'
import { router, ROUTE_HOME } from '@/router'

// app 设置面板抽屉
interface SettingDrawer {
  // 抽屉是否可见
  visible: boolean
}

// 菜单状态
interface MenuState {
  // 菜单侧边栏是否收缩(收缩时只显示图标)
  collapsed: boolean
}

type MultiTabRoute = Partial<RouteLocationNormalizedLoaded> & {
  path: string
  fullPath: string
}

/** 多页签 */
interface MultiTab {
  routes: MultiTabRoute[]
  activeRoute: string
}

interface AppState {
  settingDrawer: SettingDrawer
  menu: MenuState
  multiTab: MultiTab
}

const appStore = defineStore('app-store', {
  state(): AppState {
    return {
      menu: { collapsed: false },
      multiTab: {
        routes: [],
        activeRoute: '',
      },
      settingDrawer: { visible: false },
    }
  },
  getters: {
    activeMultiTabIndex(state) {
      const { routes, activeRoute } = state.multiTab
      return routes.findIndex((v) => v.fullPath === activeRoute)
    },
  },
  actions: {
    /** 打开配置抽屉 */
    openSettingDrawer() {
      this.settingDrawer.visible = true
    },
    /** 关闭配置抽屉 */
    closeSettingDrawer() {
      this.settingDrawer.visible = false
    },
    /** 指定菜单折叠 / 展开菜单 */
    handleMenuCollapse(collapsed: boolean) {
      this.menu.collapsed = collapsed
    },
    /** 切换菜单折叠 / 展开 */
    toggleMenu() {
      this.menu.collapsed = !this.menu.collapsed
    },
    /** 设置当前路由对应的 tab 为激活状态 */
    setActvieMultiTab(fullPath: string) {
      this.multiTab.activeRoute = fullPath
    },
    /** 判断 tab 路由是否存在某个路由 */
    getIndexInTabRoutes(fullPath: string) {
      return this.multiTab.routes.findIndex((item) => item.fullPath === fullPath)
    },
    /** 添加多 tab 的数据 */
    addMultiTab(route: RouteLocationNormalizedLoaded) {
      const { fullPath } = route
      const notExist = this.getIndexInTabRoutes(fullPath) < 0
      if (notExist) {
        // 必须通过 {...route} 创建一个新对象 push 到 multiTab.routes 中
        this.multiTab.routes.push({ ...route })
      }
    },
    /** 删除多页签 */
    removeMultiTab(fullPath: string) {
      this.clearMultiTab(this.multiTab.routes.map((r) => r.fullPath).filter((v) => v !== fullPath))
    },
    /**
     * 清理除首页外的所有页签
     * @param exclude 需要保留的多页签
     */
    clearMultiTab(excludeFullPath: string[] = []) {
      const remain = new Set<string>([...excludeFullPath, ROUTE_HOME.path])
      const { routes } = this.multiTab
      const updateRoutes = routes.filter((r) => remain.has(r.fullPath))
      this.multiTab.routes = updateRoutes
      if (!remain.has(this.multiTab.activeRoute)) {
        // 当前页面被删除，重新设置页签
        const activePath = updateRoutes[updateRoutes.length - 1].fullPath
        router.push(activePath)
        this.setActvieMultiTab(activePath)
      }
    },
    /** 点击 tab */
    handleClickTab(fullPath: string) {
      if (this.multiTab.activeRoute != fullPath) {
        router.push(fullPath)
        this.setActvieMultiTab(fullPath)
      }
    },
    /** 获取路由首页信息 */
    getHomeTabRoute(route: RouteLocationNormalizedLoaded, isHome: boolean) {
      const { name, path, meta } = ROUTE_HOME
      const home: MultiTabRoute = {
        name,
        path,
        fullPath: path,
        meta,
      }
      if (isHome) {
        Object.assign(home, route)
      }
      return home
    },
    /** 初始化多页签数据 */
    initMultiTab() {
      const { currentRoute } = router
      const isHome = currentRoute.value.name === ROUTE_HOME.name
      const home = this.getHomeTabRoute(currentRoute.value, isHome)
      const routes = [home]
      if (!isHome) {
        routes.push(currentRoute.value)
      }
      this.multiTab.routes = routes
      this.setActvieMultiTab(currentRoute.value.fullPath)
    },
  },
})

export default function useAppStore() {
  return appStore(store)
}
